<template>
  <div id="users">
    <van-nav-bar title="用户列表" left-text="返回" left-arrow>
      <template #left>
        <van-icon @click="test" name="search" size="18" />
      </template>
      <template #right>
        <router-link tag="span" to="/useradd">
          <van-icon name="plus" />添加
        </router-link>
      </template>
    </van-nav-bar>

    <user-list :users="users"></user-list>

    <bottom :active="1"></bottom>
  </div>
</template>

<script>
import axios from "axios";
import bottom from "@/components/bottom.vue";
import userList from "@/components/userList.vue";

export default {
  components: { bottom, userList },
  data() {
    return {
      users: [],
    };
  },
  methods: {
    test() {
      axios.get("/mock/test").then((response) => {
        // this.users = response.data.data;
        console.log(response);
      });
    },
  },
  created() {
    axios.get("/api/user/index.html").then((response) => {
      this.users = response.data.data;
      // console.log(response.data.data);
    });
  },
};
</script>

<style lang="sass" scoped>
>>> .van-nav-bar
  background: dodgerblue
  color: white
  .van-icon
    color: white
>>> .van-nav-bar__title
  color: white
</style>